<template>
	<view>
		<mescroll-body ref="mescrollRef" @down="downCallback" :bottombar="false" :down="downOption" :sticky="false"
			@up="upCallback" :up="upOption" @init="mescrollInit">
			<u-row v-for="(i, j) in historyList" :key="j" @click="playVideo(i)" class="history-content">
				<u-col :span="4">
					<image :src="i.vod_pic" mode="aspectFill" style="width: 200upx;height: 200upx;border-radius: 5px;"></image>
				</u-col>
				<u-col :span="8">
					<view style="color: gray;"> {{ i.type_name }}</view>
					<view style="color: grey;"> {{ i.vod_remark }}</view>
					<text selectable> {{ i.vod_name }}</text>
					<view style="color: gray;">
						<text selectable>时间： {{ getProgress(i) }}</text>
					</view>
				</u-col>
			</u-row>
		</mescroll-body>
		<u-empty text="暂无历史数据" mode="history" :show="historyList.length == 0" :margin-top="400"></u-empty>
	</view>
</template>

<script>
	import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				historyList: [],
				list: [],
				listQuery: {
					page: 1,
					pageSize: 20
				},
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: null,
						tip: "暂无数据",
						fixed: false,
						top: "560rpx",
					},
					textNoMore: '没有更多数据',
					toTop: {
						warpId: null,
						src: null,
						html: null,
						offset: 1000,
						warpClass: "mescroll-totop",
						showClass: "mescroll-fade-in",
						hideClass: "mescroll-fade-out",
						duration: 300,
						supportTap: false,
						btnClick: null
					}
				}
			}
		},
		onLoad() {
			this.fetchAllData();
		},
		onNavigationBarButtonTap() {
			this.removeAll()
		},
		onTabItemTap() {
			this.fetchAllData();
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			fetchData() {
				let start = (this.listQuery.page - 1) * this.listQuery.pageSize
				let end = this.listQuery.page * this.listQuery.pageSize
				if (start == 0) {
					this.historyList = new Array()
				}
				for (let i = start; i < end && i < this.list.length; i++) {
					this.historyList.push(this.list[i])
				}
				this.mescroll.endSuccess(end, end < this.list.length)
				// console.log(this.playList)
				// console.log('fetchData=>' + this.listQuery.page + ',start=' + start + ',end=' + end)
			},
			upCallback(options) {
				this.listQuery.page = options.num
				this.listQuery.pageSize = options.size
				this.fetchData()
			},
			// 下拉刷新的回调 (mixin默认resetUpScroll)
			downCallback() {
				this.listQuery.page = 1
				if (this.mescroll.optUp.use) {
					this.mescroll.resetUpScroll()
				} else {
					setTimeout(() => {
						this.mescroll.endSuccess();
					}, 500)
				}
			},
			getProgress(item) {
				if (item.currentTime && item.duration) {
					return (100 * item.currentTime / item.duration).toFixed(0) + "%"
				} else {
					return ""
				}
			},
			playVideo(item) {
				const site = item.key.split("-")[0];
				const id = item.key.split("-")[1];
				// item.label为播放器上方的title，电影的话就是电影名，电视剧则为“第n集”
				const url = `/pages/play/play?site=${site}&id=${id}`
				this.$u.route({ url: url });
			},
			fetchAllData() {
				if (Array.isArray(this.settings.history)) {
					let list = [...this.settings.history]
					this.list = list.reverse()
				}
			},
			removeAll() {
				this.$u.vuex('settings.history', [])
				this.$u.toast('清空播放数据成功')
			}
		}
	}
</script>

<style>
	.history-content {
		width: auto;
		/* background-color: #096; */
		padding: 10px;
		border: 1px solid #eee;
		box-sizing: border-box;
		border-radius: 5px;
		margin: 2px 5px;
	}
</style>